<template>
  <div>
    <div v-for="item in list" :key="item.id" class="track-list">
      <div class="track playing">
        <img :src="item.al.picUrl">
        <div class="title-and-artist">
          <div class="contain">
            <div class="title">  {{ item.name }}</div>
            <div class="artist">
              <span class="artist-in-line">
                <a href="javascript:;" @click="singer(item.ar[0].id)"> {{ item.ar[0].name }} </a>
              </span>
            </div>
          </div>
        </div>
        <div class="album" @click="album(item.al.id)">
          <!--  @click="$router.push(`/album/${item.id}`)" -->
          <a href="javascript:;">{{ item.al.name }}</a>
        </div>
        <div class="actions">
          <button>
            <span v-if="like" class="svg-icon">
              <span class="iconfont icon-aixin" />
            </span>
            <span v-else class="svg-icon">
              <span class="iconfont icon-aixin1" />
            </span>
          </button>
        </div>
        <div class="time">{{ item.dt|transferTime }}</div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  filters: {
    transferTime(val) {
      const m = parseInt(val / 1000 / 60)
      let s = parseInt(val / 1000) % 60
      s = s > 9 ? s : '0' + s
      return `${m}:${s}`
    }
  },
  props: {
    list: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      like: ''
    }
  },
  methods: {
    singer(id) {
      // 直接调用$router.push 实现携带参数的跳转
      this.$router.push({
        path: `/singer/${id}`
      })
    },
    album(id) {
      this.$router.push({
        path: `/album/${id}`
      })
    }
  }
}
</script>

<style lang="less" scoped>
.track-list{
  &:hover .svg-icon{
    display: block;
  }
  .svg-icon{
    display: none;
  }
    .track{
        display: flex;
        align-items: center;
        padding: 8px;
        border-radius: 12px;
        user-select: none;
        img{
          border-radius: 8px;
          height: 46px;
          width: 46px;
          margin-right: 20px;
          border: 1px solid rgba(0,0,0,.04);
          cursor: pointer;
        }
        .title-and-artist{
            flex: 1;
            display: flex;
            width: 287px;
            height: 42px;
            .contain{
              display: flex;
              flex-direction: column;
              .title{
                font-size: 18px;
                font-weight: 600;
                color:rgb(0, 0, 0);
                cursor: default;
                padding-right: 16px;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                overflow: hidden;
                word-break: break-all;
              }
              .artist{
                 margin-top: 2px;
                 font-size: 13px;
                 opacity: .68;
                 color:rgb(0, 0, 0);
                 display: -webkit-box;
                 -webkit-box-orient: vertical;
                 -webkit-line-clamp: 1;
                 overflow: hidden;
                 .artist-in-line{
                   font-size: 13px;
                   color:rgb(0, 0, 0);
                     a{
                       color:rgb(0, 0, 0);
                       text-decoration: none;
                          &:hover{
                          text-decoration: underline;
                         }
                     }
                 }
              }
            }
        }
        .album{
         flex: 1;
         font-size: 16px;
         opacity: .88;
          a{
            color: inherit;
            text-decoration: none;
            cursor: pointer;
             &:hover{
              text-decoration: underline;
             }
         }
        }
        .actions{
          width: 80px;
          display: flex;
          justify-content: flex-end;
          button{
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 8px;
            background: transparent;
            border-radius:25%;
            transition: transform .2s;
            border: none;
            &:hover{
             transform:scale(1.2, 1.2);
            }
            .svg-icon{
              width: 16px;
              height: 16px;
              color:#335eea;
            }
          }
        }
        .time{
          font-size: 16px;
          width: 50px;
          cursor: default;
          display: flex;
          justify-content: flex-end;
          margin-right: 10px;
          font-variant-numeric:tabular-nums;
          opacity: .88;
        }
    }
    .playing{
          &:hover{
           background-color: #f5f5f7;
          }
        }
}
</style>
